<template>
  <el-select
    v-model="selects" :allow-create="allowCreate" :disabled="disabled" :placeholder="placeholder" default-first-option
    :multiple-limit="multipleLimit" filterable multiple @change="trimChange()"
  >
    <el-option v-for="item in options" :key="item" :label="item" :value="item"/>
  </el-select>
</template>

<script>
export default {
  name: "StringSplitFormatMulSelect",

  props: {
    value: {
      type: Array, default: function () {
        return []
      }
    },
    placeholder: {type: String, default: null},
    options: {
      type: Array, default: function () {
        return []
      }
    },
    formatFunction: {
      type: Function, default: function (val) {
        return val
      }
    },
    filterFunction: {
      type: Function, default: function () {
        return true
      }
    },
    disabled: {type: Boolean, default: false},
    multipleLimit: {type: Number, default: 0},
    allowCreate: {type: Boolean, default: false},
    mode: {type: String, default: null},
  },

  data() {
    return {
      selects: []
    }
  },

  watch: {
    'value': {
      handler(val) {
        // console.log('val: ', val)
        // console.log('option: ', this.options)
        let tables = [];
        if (val && val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            if (val[i].includes(',') || val[i].includes('，')) {
              const result = val[i].trim().replace('，', ',').split(',').map(table => table.trim())
              if (this.mode === 'QUICK') {
                const validTables = result.filter(table => this.options.includes(table))
                const inValidTables = result.filter(table => !this.options.includes(table))
                if (inValidTables.length !== 0) {
                  this.$confirm(inValidTables, '以下内容添加失败！请检查是否正确：', {
                    confirmButtonText: '确定',
                    type: 'warning'
                  })
                } else {
                  this.$confirm(validTables.length, '全部添加成功！总数为：', {
                    confirmButtonText: '确定',
                    type: 'success'
                  })
                }
                tables = tables.concat(validTables)
              } else {
                tables = tables.concat(result)
              }
            } else {
              if (this.mode === 'QUICK') {
                if (this.options.includes(val[i])) {
                  tables.push(val[i])
                } else {
                  this.$confirm(val[i], '添加失败！', {
                    confirmButtonText: '确定',
                    type: 'warning'
                  })
                }
              } else {
                tables.push(val[i])
              }
            }
          }
        }
        tables = [...new Set(tables)]
        this.selects = this.arraysHaveSameContent(val, tables) ? val : tables
      }, immediate: true
    },

    'selects': {
      handler(val) {
        this.$emit('input', val)
      }, immediate: true
    }
  },

  methods: {
    trimChange() {
      let result = [];
      for (let i = 0; i < this.selects.length; i++) {
        const ele = this.formatFunction(this.selects[i]);
        if (this.filterFunction(ele)) {
          if (!result.includes(ele)) {
            result.push(ele)
          } else {
            result = result.filter(item => item !== ele)
          }
        }
      }
      this.selects = result
    },
    arraysHaveSameContent(arr1, arr2) {
      if (arr1.length !== arr2.length) {
        return false
      }
      for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style scoped>

</style>
